<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 600px;
      height: 400px;
      background: rgb(209, 141, 52);
      font-size: 24px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    //获取 div
    let div = document.querySelector('div');
    //绑定单击事件, 事件回调的形参一般用 e 或者是 event 来表示
    div.onmousemove = function(e){
      //获取鼠标点击的位置
      // console.log(e);
      //将鼠标的位置, 在 div 中展示出来
      let x = e.clientX;
      let y = e.clientY;
      //拼接坐标的字符串
      let str = `x:${x} <br>y:${y}`;
      //修改 div 的文本
      div.innerHTML = str;
    }

  </script>
</body>
</html>